<template>
    <div class="SongSheetComBox">
        <!-- 精品歌单头部 -->
        <div class="boutiqueSong" v-if="boutiqueSongData.length">
            <div class="one">
                <img :src="boutiqueSongData[0].coverImgUrl" alt="">
            </div>
            <div class="two">
                <div style="margin-bottom:20px">
                    <i class="iconfont big-changyongtubiao-xianxingdaochu-zhuanqu-"></i>
                    <span>精品歌单</span>
                </div>
                <div>{{boutiqueSongData[0].name}}</div>
                <div>{{boutiqueSongData[0].copywriter}}</div>
            </div>
        </div>
        <!-- 精品歌单主体 -->
        <div class="boutiqueSongMain" v-loading="songListLoading" element-loading-text = "努力加载中...">
            <!-- 歌单类型 -->
            <div class="title">
                <div class="all">
                    <span>全部歌单</span>
                    <i class="iconfont big-icon-2"></i>
                </div>
                <div class="type">
                    <span :class="typeName==item.name? 'spanActive':''" @click="typeClick(item)" v-for="(item,index) in songTypeList" :key="index">{{item.name}}</span>
                </div>
            </div>
            <!-- 歌单 -->
            <div class="songList">
                <ul>
                    <li 
                        @click="songListClick(item)"
                        @mouseenter="RecommendMouseenter(item)"
                        @mouseleave="RecommendMouseleave()" v-for="(item,index) in songListData" :key="index">
                        <img :src="item.coverImgUrl" alt="">
                        <div class="text">{{item.name}}</div>
                        <div class="playCount">
                            <i class="iconfont big-bofang"></i>
                            <span v-show="item.playCount<100000">{{item.playCount}}</span>
                            <span v-show="item.playCount>100000">{{Math.ceil(item.playCount/10000)}}万</span>
                        </div>
                        <div :class="mouseFlag==item.id? 'bfBthAvtive':'bfBth'">
                            <i class="iconfont big-bofang"></i>
                        </div>
                        <div class="nickname">
                            <i class="iconfont big-denglu"></i>
                            <span>{{item.creator.nickname}}</span>
                        </div>
                    </li>
                </ul>
            </div>
            <!-- 分页 -->
            <div class="pagination">
                <el-pagination
                    background
                    layout="prev, pager, next"
                    @current-change="currentChange"
                    :total="100">
                </el-pagination>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    data(){
        return{
            songListLoading:false,
            typeName:"",
            mouseFlag:"",
            page:"0",
            songListData:[],
            boutiqueSongData:[],
            songTypeList:[]
        }
    },
    mounted(){
        this.getTopPlaylistHighquality();
        this.getTopPlaylist();
        this.getPlaylistHot();
    },
    methods:{
        // 当前页数
        currentChange(value){
            this.page = value*50;
            this.getTopPlaylist();
        },
        // 获取歌单数据
        getTopPlaylist(){
            this.songListLoading=true;
            this.$axios.get('/top/playlist?limit=100&offset='+this.page+'&cat='+this.typeName).then(res=>{
                if(200==res.data.code){
                    this.songListData = res.data.playlists;
                }
            }).finally(()=>this.songListLoading=false)
        },
        // 获取头部歌单
        getTopPlaylistHighquality(){
            this.$axios.get('/top/playlist/highquality?cat='+this.typeName).then(res=>{
                if(200==res.data.code){
                    this.boutiqueSongData = res.data.playlists;
                }
            })
        },
        // 热门歌单分类
        getPlaylistHot(){
            this.$axios.get('/playlist/hot').then(res=>{
                if(200==res.data.code){
                    this.songTypeList = res.data.tags;
                }
            })
        },
        // 歌单分类点击
        typeClick(item){
            this.typeName = item.name;
            this.getTopPlaylist();
            this.getTopPlaylistHighquality();
        },
        // 鼠标移入
        RecommendMouseenter(item){
            this.mouseFlag = item.id;
        },
        // 鼠标移出
        RecommendMouseleave(){
            this.mouseFlag = "";
        },
        // 歌单点击
        songListClick(item){
            localStorage.setItem('songItem',JSON.stringify(item));
            this.$router.push('/SongDetails')
        },
    }
}
</script>

<style lang="scss" scoped>
@import "./SongSheetCom.scss";
</style>